.face {
  transform-style: preserve-3d;
  position: absolute;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: var(--bg);

  --half-w: calc(var(--width) / 2);
  --half-h: calc(var(--height) / 2);
  --half-d: calc(var(--depth) / 2);

  &.front {
    translate: calc(-1 * var(--half-w)) calc(-1 * var(--half-h)) var(--half-d);
    width: var(--width);
    height: var(--height);
  }

  &.back {
    transform: rotateY(180deg);
    translate: calc(-1 * var(--half-w)) calc(-1 * var(--half-h)) calc(var(--depth) / -2);
    width: var(--width);
    height: var(--height);
  }

  &.right {
    transform: rotateY(-90deg);
    translate: calc(-1 * var(--half-w) - var(--half-d)) calc(-1 * var(--half-h)) 0;
    width: var(--depth);
    height: var(--height);
  }

  &.left {
    transform: rotateY(90deg);
    translate: calc(var(--half-w) - var(--half-d)) calc(-1 * var(--half-h)) 0;
    width: var(--depth);
    height: var(--height);
  }

  &.top {
    transform: rotateX(90deg);
    translate: calc(-1 * var(--half-w)) calc(var(--half-h) - var(--half-d)) 0;
    width: var(--width);
    height: var(--depth);
  }

  &.bottom {
    transform: rotateX(-90deg);
    translate: calc(-1 * var(--half-w)) calc(-1 * var(--half-h) - var(--half-d)) 0;
    width: var(--width);
    height: var(--depth);
  }
}
